<template>
	<view>
		
			<view class="status_bar"></view>
			<view class="top" >
						 <u-icon size="50rpx" name="arrow-left" @click="toBack" style="padding-top: 0rpx;z-index: 1;"></u-icon>
						<image :src="backImg"  style="height: 300rpx;width: 100%;
		  vertical-align: bottom;margin-left: -70rpx;" mode="aspectFill"></image>
						 <!-- <u-icon size="50rpx" style="float: right;" name="plus" @click="addEvent"></u-icon> -->
			</view>
			<view style="background-color: white;: 10%;margin:20rpx 30rpx 20rpx 30rpx">
				<view style="display: flex;padding-top: 20rpx;padding-left: 30rpx;">
					<image class="avatar" :src="person.avatar"  mode="aspectFill"  ></image>
					<view style="padding-left: 20rpx;">
					<view style="display: flex;">
						<text  style="font-size: 50rpx;font-weight: bold;">{{person.username}}</text>
						<u-icon :name="person.gender" style="padding-left: 50rpx;" size="50rpx"></u-icon>
					</view>
					<text >{{person.slogan}}</text>
					</view>
				</view>
				<view style="padding-left: 30rpx;padding-bottom: 20rpx;padding-top: 20rpx;">
					<text>{{person.des}}</text>
				</view>
			</view>
	<view style="background-color: white;display: flex;flex-wrap: wrap;margin:0rpx 20rpx 20rpx 30rpx;padding: 10rpx 10rpx 20rpx 20rpx;width:auto">
						<u-tag  v-if="person.school!=null" :text="person.school" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;S"></u-tag>
						<u-tag v-if="person.age!=null" :text="person.age" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="person.work!=null" :text="person.work" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
					    <u-tag v-if="person.mbti!=null" :text="person.mbti" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="person.constellation!=null" :text="person.constellation" shape="circle"  :show="show" plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="person.hobby1!=null" :text="person.hobby1" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="person.hobby2!=null" :text="person.hobby2" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="person.hobby3!=null" :text="person.hobby3" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
					</view>
			<view style="margin-top: 20rpx;height: 50rpx;width: 150rpx;background-color: #fedfc8;margin-left: 30rpx;font-size: 30rpx;  padding-top: 5rpx;padding-left: 20rpx;">最近发布</view>
			<view style="background-color: white;: 10%;margin:20rpx 30rpx 20rpx 30rpx;display: flex;height: 180rpx;padding-top: 20rpx;padding-left: 30rpx;" @click="seeArticles">
				<view style="width: 1000rpx;height: 200rpx;">
					<text style="font-weight: bold;padding-bottom: 20rpx;">{{title}}</text>
					<view style="word-break: break-all;
                      overflow: hidden;
                      display: -webkit-box;
                      -webkit-line-clamp: 2;
                      -webkit-box-orient: vertical;font-size: 29rpx;padding-top: 20rpx;" >{{content}}</view>
				</view>
				<image :src="firstImg" style="height: 160rpx;" mode="aspectFit"></image>
			</view>
			<view  v-if="status==0&&isfriend==true" style="display: flex;margin: 40rpx 30rpx 20rpx 30rpx;background-color: #ffdf80;padding-left: 250rpx;height: 60rpx;border-radius: 20rpx;" @click="addFriend">
				<u-icon name="plus" size="40"></u-icon>
				<view style="font-weight: bold;padding-top: 6rpx;padding-left: 20rpx;" >添加伙伴</view>
			</view>
			<u-button v-if="status==1" shape="circle" style="background-color: #ffdf80;margin: auto;width: 80%;margin-top: 20rpx;margin-bottom: 50rpx;" @click="agree">同意</u-button>
			<u-button v-if="status==1" shape="circle" style="background-color: #ffdf80;margin: auto;width: 80%;" @click="disagree">拒绝</u-button>
	</view>
</template>

<script>
	export default {
		onLoad(options){
			console.log(options)
			this.myId=options.myId
			this.friendId=options.id
			this.status=options.status
			this.$H.get('friends/queryFriend?userId='+this.myId+'&friendId='+this.friendId).then(res=>{
				if(res.code==200){
					this.isfriend==false
				}
			})
			this.$H.get('user/'+options.id).then(res=>{
				
				this.person=res.data
				if(this.person.hobby!==null){
				this.person.hobby=this.person.hobby.split(",")
				this.person.hobby1=this.person.hobby[0]
				this.person.hobby2=this.person.hobby[1]
				this.person.hobby3=this.person.hobby[2]
				}
				if(this.person.gender=="女") {this.person.gender='woman'}
				else{this.person.gender='man'}
				
			})
			this.$H.get('articles/queryLast?userid='+options.id).then(res=>{
				
				this.title=res.result.title
				this.content=res.result.content
				this.firstImg=JSON.parse(res.result.images)[0]
				this.articlesid=res.result.id
				
							})
		},
		data() {
			return {
				backImg: '/static/page2.jpg',
				avatar: '/static/cat.jpg',
				nickName: "hh",
				slogan: "一个人的生活 一个人的生活一个人的书哟",
				introduction: "啥也不会的社恐",
				customstyle: {
					height: "80rpx",
				},
				isfriend:true,
				show: true,
				title: "搭子",
				content: "求一个图书馆搭子股份回购方法挂号费公检法干哈代发尴尬手打干撒搭嘎搜嘎手打第三个第三个电饭锅地方代发很尬代发个放大过大时干撒",
				firstImg:'/static/cat.jpg',
				person: {},
				myId: "",
				articlesid: "",
				friendId: "",
				status:1
			}   
		},
		methods: {
			toBack(){
				uni.navigateBack({})
			},
			close(index){
				this.show=false
				
			},
			addFriend(){
				uni.navigateTo({
					url:'/pages/mine/addFriend/addFriend?&myId='+this.myId+'&friendId='+this.friendId
				})
			},
			seeArticles(){
				uni.navigateTo({
					url:'/pages/my_page/my_page?id='+this.articlesid
				})
			},
			agree(){
				this.$H.get('friends/updatetobeFriend?userId='+this.myId+'&friendId='+this.friendId+'&agree=1').then(res=>{
					if(res.code==200){
						uni.showToast({
							title:"已同意",
							icon: "none"
						})
                    uni.reLaunch({
                    	url:'/pages/contact/index'
                    })
					}
				})
			},
			disagree(){
				this.$H.get('friends/updatetobeFriend?userId='+this.myId+'&friendId='+this.friendId+'&agree=0').then(res=>{
					if(res.code==200){
						uni.showToast({
							title:"已拒绝",
							icon: "none"
						})
			        uni.switchTab({
				url:'/pages/contact/index'
			})
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.top{
		display: flex;
		width: 100%;
		
		height: 300rpx;
		padding-left: 30rpx;
		
		
		
	}
	.avatar {
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		flex-shrink: 0;
		margin-right: 20rpx;
	}
</style>
